<template>
	<view class="container">
		<!-- 页面顶部导航栏 -->
		<view class="header">
			<text class="header-title">商品收藏</text>
		</view>

		<!-- 商品列表 -->
		<view class="recommendations">
			<view class="product-list" @click="recommend">
				<view class="product-item" v-for="(product, index) in products" :key="index">
					<!-- 复选框，仅在编辑模式下显示，放置在右上角 -->
					<checkbox :checked="selectedProducts.includes(product)" v-if="isEditing" @change="toggleSelection(product)" class="checkbox"></checkbox>

					<image class="product-image" :src="product.image"></image>
					<text class="product-name">{{ product.name }}</text>
					<text class="product-price">￥{{ product.price }}</text>
				</view>
			</view>
		</view>

		<!-- 底部编辑按钮 -->
		<view class="edit-button">
			<view class="edit-actions">
				<!-- 全选按钮，仅在编辑模式下显示 -->
				<view v-if="isEditing" class="select-all" @click="selectAll">
					<checkbox :checked="isAllSelected">全选</checkbox>
				</view>

				<!-- 删除按钮 -->
				<view v-if="isEditing" class="delete-btn" @click="deleteSelected">
					<button class="delete">删除</button>
				</view>

				<!-- 编辑按钮 -->
				<button class="edit-btn" @click="toggleEditMode">{{ isEditing ? '完成' : '编辑' }}</button>
			</view>
		</view>
	</view>
</template>


<script>
export default {
	data() {
		return {
			isEditing: false, // 编辑模式状态
			selectedProducts: [], // 存储选中的商品
			// 模拟数据
			products: [
				{
					image: '/static/mangguo.jpg',
					name: '111111111 2222 333333333',
					price: 299
				},
				{
					image: '/static/putao.jpg',
					name: '666666 666666666666666',
					price: 299
				}
			]
		};
	},
	computed: {
		// 全选复选框是否选中
		isAllSelected() {
			return this.selectedProducts.length === this.products.length;
		}
	},
	methods: {
		// 切换编辑模式
		toggleEditMode() {
			this.isEditing = !this.isEditing;
			if (!this.isEditing) {
				// 退出编辑模式时清空选中的商品
				this.selectedProducts = [];
			}
		},
		// 选择所有商品
		selectAll() {
			if (this.isAllSelected) {
				this.selectedProducts = []; // 全选时清空选中
			} else {
				this.selectedProducts = [...this.products]; // 全选时选中所有商品
			}
		},
		// 切换选中的商品
		toggleSelection(product) {
		},
		// 删除选中的商品
		deleteSelected() {
		}
	}
};

</script>

<style scoped>
	/* 页面容器 */
	.container {
		background-color: #f5f6fa;
		height: 100vh;
		padding: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-family: Arial, sans-serif;
		overflow: hidden;
	}

	/* 顶部标题栏 */
	.header {
		background-color: #2ac2d2;
		display: flex;
		align-items: center;
		padding: 15px 20px;
		color: #fff;
		width: 100%;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		margin-bottom: 20px;
	}

	/* 商品列表 */
	.product-list {
		display: flex;
		flex-wrap: wrap;
		gap: 5px;
		padding: 0 10px;
		justify-content: space-between;
	}

	.product-item {
		width: calc(45% - 10px);
		background-color: #f9f9f9;
		padding: 10px;
		text-align: center;
		border-radius: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		position: relative;
	}

	.product-image {
		width: 150px;
		height: 180px;
		border-radius: 10px;
		margin-bottom: 5px;
	}

	.product-name {
		font-size: 14px;
		color: #333333;
		margin-bottom: 5px;
	}

	.product-price {
		font-size: 16px;
		color: #e60012;
		font-weight: bold;
	}

	/* 复选框样式，右上角 */
	.checkbox {
		position: absolute;
		top: 10px;
		right: 10px;
	}

	/* 底部编辑按钮固定样式 */
	.edit-button {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 10px 0;
		background-color: #ffffff;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: center;
	}

	.edit-actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 80%;
	}

	.select-all {
		font-size: 14px;
	}

	.delete {
		padding: 5px 30px;
		font-size: 14px;
		color: white;
		margin-left: 40px;
		background-color: #e60012;
		border: none;
		border-radius: 25px;
		cursor: pointer;
	}

	.edit-btn {
		padding: 5px 30px;
		font-size: 14px;
		color: white;
		background-color: #2ac2d2;
		border: none;
		border-radius: 30px;
		cursor: pointer;
	}
</style>